.header{ /* style pour l'entête de mon site*/
   background-color: transparent; 
   height: 80px;
   margin:  -20px;
   position: relative;
}
footer{ /* style pour le pied de page de mon site*/
   position: relative;
   bottom: 0;
   width: 100%;
   height: 100%;
   margin-top: 1%;
   
}
/*style pour la barre de navigation*/
.navbar{ 
   width: 90%;
   margin-right:700px;
   margin-top: 20px;
   padding-right: -150px;
   position:absolute;    
}

.navbar ul li {
   list-style: none;
   display: inline-block;
   margin: 0 15px;

}
ul li a:hover{
 color:#f9da3d;
 text-decoration: underline;
}
ul li a{
 color:rgb(253, 47, 6);
 letter-spacing: 0,2rem;
 text-align: center;
 font-size: medium;

}
ul li a:hover{
 color:#f9da3d;
 text-decoration: underline;
}
.menu li a{
 text-decoration:none;
}

/* form */
form{ 
   padding: 20px;
   text-align:right;
}
/* style pour les images de mon site*/
.image{ 
   width: 300px;
   height: 3s00px;
}

/* style pour centrer mon tableau au milieu de ma page*/
.center { 
   text-align: center;
   width:480px;
   margin-left:auto;
   margin-right:auto;
   margin-bottom:35px;
}
/* style pour le texte de mon site*/
.texte1{ 
   color: black;
   font-size: 32px;
   margin-top: 10px;
   margin-left: 50px;
   position: absolute;
}
.texte2{  /* style pour le texte de mon site*/
   color: black;
   font-size: 32px;
   margin-top: 10px;
   margin-left: 50px;
   position: absolute;
}
.texte3{  /* style pour le texte de mon site*/
   color: black;
   font-size: 32px;
   margin-top: 10px;
   margin-left: 50px;
   position: absolute;
}
 table td {  /* style pour le tableau*/
   height: 70px;
   width: 200px;
   border: 2px solid #000;
   vertical-align:top;
   text-align:center;
   position: relative;
   margin-left: 1000px;
 }
  
  table { /* style pour le tableau*/
   width: 100%;
   border-collapse: collapse;
   margin-top : -600px;
 }

 /* styles pour les écrans de taille comprise entre 768px et 992px */
@media screen and (max-width: 992px) {
   table td {
     width: 150px;
   }
 }
 
 /* styles pour les écrans de taille comprise entre 576px et 768px */
 @media screen and (max-width: 768px) {
   table td {
     width: 100px;
   }
 }
 
 /* styles pour les écrans de taille inférieure à 576px */
 @media screen and (max-width: 576px) {
   table td {
     width: 50px;
     font-size: 10px;
   }
 }

  body { /* style arrière-plan du site*/
   margin: auto;
   font-family: -apple-system, BlinkMacSystemFont, sans-serif;
   overflow: auto;
background:linear-gradient(-45deg, #9e9ea3, #909ca4, #c8d1d4, #def5f5);
   animation: gradient 15s ease infinite;
   background-size: 400% 400%;
   background-attachment: fixed;
}

@keyframes gradient { /*style arrière- plan du site*/
   0% {
       background-position: 0% 0%;
   }
   50% {
       background-position: 100% 100%;
   }
   100% {
       background-position: 0% 0%;
   }
}

.wave { /*style arrière- plan du site*/
   background: rgb(255 255 255 / 25%);
   border-radius: 1000% 1000% 0 0;
   position: fixed;
   width: 200%;
   height: 12em;
   animation: wave 10s -3s linear infinite;
   transform: translate3d(0, 0, 0);
   opacity: 0.8;
   bottom: 0;
   left: 0;
   z-index: -1;
}

.wave:nth-of-type(2) { /*style pour mon diaporama*/
   bottom: -1.25em;
   animation: wave 18s linear reverse infinite;
   opacity: 0.8;
}

.wave:nth-of-type(3) { /*style pour mon diaporama*/
   bottom: -2.5em;
   animation: wave 20s -1s reverse infinite;
   opacity: 0.9;
}

@keyframes wave { /*style pour mon diaporama*/
   2% {
       transform: translateX(1);
   }

   25% {
       transform: translateX(-25%);
   }

   50% {
       transform: translateX(-50%);
   }

   75% {
       transform: translateX(-25%);
   }

   100% {
       transform: translateX(1);
   }
} 


.slider { /* style pour le diaporama*/
  width: 800px;
  margin: 30px auto;
  position: relative;
}

.slider-viewport { /* style pour le diaporama*/
  width: 800px;
  height: 400px;
  overflow: hidden;
}

.slider-content { /* style pour le diaporama*/
  display: grid;
  grid-auto-flow: column;
  -webkit-transition: 1s all;
  transition: 1s all;
}
.slider-content img { /* style pour les images du diaporama*/
  width: 800px;
  height: 400px;
}

.slider-nav { /* style pour le diaporama*/
  position: absolute;
  width: 100%;
  bottom: -30px;
  margin-top: 10px;
  text-align: center;
}
.slider-nav a { /* style pour les boutons permettant de changer d'image dans mon slide*/
  -webkit-box-shadow: 0px 0px 5px 0px rgba(255, 255, 255, 0.3);
          box-shadow: 0px 0px 5px 0px rgba(255, 255, 255, 0.3);
  display: inline-block;
  background-color: #adafbc;
  width: 15px;
  height: 15px;
  margin: 0 3px;
}
.slider-nav a:hover { /* style pour les boutons permettant de changer d'image dans mon slide*/
  background-color: #fff;
  -webkit-box-shadow: 0px 0px 5px 0px rgba(255, 255, 255, 0.8);
          box-shadow: 0px 0px 5px 0px rgba(255, 255, 255, 0.8);
}

#img2:target .slider-content { /* orientation des images de mon slide*/
  -webkit-transform: translateX(-800px);
          transform: translateX(-800px);
}

#img3:target .slider-content { /* orientation des images de mon slide*/
  -webkit-transform: translateX(-1600px);
          transform: translateX(-1600px);
}

#img4:target .slider-content { /* orientation des images de mon slide*/
  -webkit-transform: translateX(-2400px);
          transform: translateX(-2400px);
}

#img5:target .slider-content { /* orientation des images de mon slide*/
  -webkit-transform: translateX(-3200px);
          transform: translateX(-3200px);
}

figure{ /* style pour image légendée*/
   border:none;
   display: flex;
   flex-flow: column;
   padding-left: 30px;
   max-width: 200px;
   margin: center;
   padding-top: 100px;
}

@media screen and (min-width:640px){
figcaption{ /* style pour image légendée*/
   padding-left: 90px;

}
}

@media screen and (min-width:640px){
.blink{ /* style pour texte animé*/
   position: Absolute; 
   top: 500px; 
   right:200px; 
   animation: blink 3s infinite;
   color:brown;
}
}
@media screen and (min-width:640px){
@keyframes blink {  /* style pour texte animé*/
   0% { opacity:0; }
   50% { opacity:1; } 
   100% { opacity:0; }
 }
}
 .map{ /* style pour la position de ma carte*/
   margin-left: 400px;
   margin-top: -600px;
   margin-right: 2000px;
 }

/* Responsive pour tablette et ordinateur */
@media screen and (min-width: 768px) {
   /* Styles pour les écrans plus larges */
   body {
     font-size: 16px;
   }
 }
 
 /* Responsive pour smartphones */
 @media screen and (max-width: 767px) {
   /* Styles pour les écrans plus petits */
   body {
     font-size: 14px;
   }
 }